<template>
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <div class="near-box">
    
        <div class="jd-qrdd-bigbox">
            <!--商品地址管理部分-->
            <div class="indent-details-box">
                <span class="indent-details-img1"></span>
                <span class="indent-details-text1">已发货</span>
                <span class="indent-details-text2">物流信息：客户签收人：邮件收发 已签收 感谢使用圆通快递，期待再次为您服务！</span>
                <span class="indent-details-text3">2017-10-23 12:25:12</span>
            </div>
            <!--地址部分-->
            <div class="jd-qrdd-a1">
                <span class="qrdd-a1-t1">{{address.consignee}}</span>
                <span class="qrdd-a1-t1">{{address.mobile}}</span>
                <span class="qrdd-a1-t2" v-if="address.status == 1">默认</span>
                <div class="qrdd-a1-b1">
                    <span class="qrdd-a1-img1"></span>
                    <span class="qrdd-a1-t3">{{address.provinces.name}} {{address.citys.name}} {{address.districts.name}} {{address.address}}</span>
                </div>
                <span class="qrdd-a1-img2"></span>
            </div>
            <!--商品部分-->
            <div class="zjzz-buylist-goods1">
                <!-- <div class="zjzz-buylist-gtime">
                    <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>{{order.code}}</span>
                    <span class="zjzz-buylist-gtime2">联系客服</span>
                </div> -->
                <div class="zjzz-buylist-det" v-for="item of OrderProduct" :key="item.id">
                    <img :src="item.product.cover_cdn"/>
                    <div class="zjzz-buylist-gdetail">
                        <span class="zjzz-buylist-gtit1">{{item.product.name}}</span>
                        <span class="zjzz-buylist-gmoney">
                            <i class="zjzz-buylist-gm1">￥{{item.total}}</i>
                            <i class="zjzz-buylist-gm2">x{{item.nums}}</i>
                        </span>
                    </div>
                </div>
                <div class="zjzz-buylist-btn">
                    <a class="zjzz-buylist-btn3">申请售后</a>
                </div>
            </div>
            <!--商品金额部分-->
            <div class="indent-details-box2">
                <span class="indent-details-text4">应付总额</span>
                <span class="indent-details-text5">￥{{order.total}}</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">商品总价</span>
                <span class="indent-details-text5 tcolor-black">￥{{order.total}}</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">运费</span>
                <span class="indent-details-text5 tcolor-black">￥0.00</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">税费</span>
                <span class="indent-details-text5 tcolor-black">￥0.00</span>
            </div>
            <div class="indent-details-box2">
                <span class="indent-details-text4 tcolor-grey">发票信息</span>
                <span class="indent-details-text5 tcolor-black">不需要发票</span>
            </div>
            <!--订单编号部分-->
            <div class="indent-details-box3">
                <p>订单编号:{{order.code}}</p>
                <!-- <p>支付方式:支付宝</p>
                <p>支付交易单号:201711024866544846144</p> -->
                <p>下单时间:{{order.createtime}}</p>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    created() {
        let orderid = this.$route.query.orderid

        if(!orderid)
        {
            this.$notify({
                type: "danger",
                message: '订单不存在，请重新选择',
                duration:1500
            });
            this.$router.push('/order/order/index')
            return false
        }

        this.orderid = orderid

        this.Order()
    },
    data() {
        return {
            orderid:0,
            LoginUser:this.$cookies.get('LoginUser'),
            order:{},
            OrderProduct:[],
            address:{
                provinces:{},
                citys:{},
                districts:{}
            }
        }
    },
    methods: {
        onClickLeft()
        {
            this.$router.push('/order/order/index')
        },
        async Order()
        {
            let data = {
                userid:this.LoginUser.id,
                orderid:this.orderid
            }

            let result = await this.$api.OrderInfo(data)

            if(result.code === 0)
            {
                this.$notify({
                    type: "danger",
                    message: result.msg,
                    duration:1500
                });
                this.$router.push('/order/order/index')
                return false
            }

            this.order = result.data.order
            this.OrderProduct = result.data.OrderProduct
            this.address = result.data.address
        }
    },
}
</script>
<style>
@import url('/assets/css/indent-details.css');


</style>